<template>
  <el-dialog
    v-el-drag-dialog
    title="整改项"
    :visible.sync="visible"
    width="800px"
    @closed="reset"
  >
    <div v-if="billItemNew.length > 0">
      <table class="pure-table pure-table-bordered">
        <thead>
          <tr>
            <th>序号</th>
            <th>整改项</th>
            <th>隐患级别</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in billItemNew" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.itemDetailName+ '&nbsp;&nbsp;&nbsp;' + item.itemName }}</td>
            <td>{{ item.warnLevelTxt }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {
    gasCheckQueryDetail
  } from '@/api/index'
  export default {
    name: 'rectification',
    data() {
      return {
        visible: false,
        billItemNew: []

      }
    },
    methods: {
      open(temp) {
        this.visible = true
        if (temp) {
          this.gasCheckDetail(temp.checkId)
        }
      },
      gasCheckDetail(checkId) {
        gasCheckQueryDetail({ checkId }).then(res => {
          this.getTableInfo(res.data.billItemList)
        })
      },
      getTableInfo(billItemList) {
        const billItemNew = []
        let warnLevelTxt = ''
        billItemList.forEach(element => {
          if (element.warnLevel > 0) {
            if (element.warnLevel === 1) {
              warnLevelTxt = '停止供气（备注）'
            }
            if (element.warnLevel === 2) {
              warnLevelTxt = '2类隐患（备注）'
            }
            if (element.warnLevel === 3) {
              warnLevelTxt = '期限整改'
            }
            if (element.warnLevel === 4) {
              warnLevelTxt = 'level4'
            }
            if (element.warnLevel === 5) {
              warnLevelTxt = 'level5'
            }
            billItemNew.push({
              itemDetailName: element.itemDetailName,
              itemName: element.itemName,
              warnLevelTxt: warnLevelTxt
            })
          }
        })
        this.billItemNew = billItemNew
      },

      reset() {
        this.billItemNew = []
      }
    }
  }
</script>

<style lang="scss" scoped>
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

.pure-table {
  border: 1px solid #cbcbcb;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
}

.pure-table caption {
  padding: 1em 0;
  font: italic 85%/1 arial, sans-serif;
  color: #000;
  text-align: center;
}

.pure-table td,
.pure-table th {
  padding: 0.5em 1em;
  margin: 0;
  overflow: visible;
  font-size: inherit;
  border-left: 1px solid #cbcbcb;
  border-width: 0 0 0 1px;
}

.pure-table thead {
  color: #000;
  text-align: left;
  vertical-align: bottom;
  background-color: #e0e0e0;
}

.pure-table td {
  background-color: transparent;
}

.pure-table-bordered td {
  border-bottom: 1px solid #cbcbcb;
}

.pure-table-bordered tbody > tr:last-child > td {
  border-bottom-width: 0;
}
</style>
